<!--  -->
<template>
  <div class="">
    <!-- 父类声明 label-width="80px" 子类集成-->
    <el-form ref="form" label-width="80px" :model="spu">
      <el-form-item label="SPU名称">
        <el-input placeholder="SPU名称" v-model="spu.spuName"></el-input>
      </el-form-item>

      <el-form-item label="品牌">
        <el-select placeholder="请选择品牌" v-model="spu.tmId">
          <el-option
            :label="trm.tmName"
            :value="trm.id"
            v-for="(trm, index) in tradeMarkResult"
            :key="trm.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="SPU描述">
        <el-input
          type="textarea"
          rows="4"
          placeholder="描述"
          v-model="spu.description"
        ></el-input>
      </el-form-item>

      <!-- 多图片上传   目前存在跨域-->
      <el-form-item label="SPU图片">
        <!-- 上传图片： action图片上传的地址
                    list-type：文件列表的类型 on-preview:图片浏览的时候会出发  on-remove:当删除图片的时候会触发
                    file-list: 照片墙需要展示的数据【数组：数据里面的元素务必需要有name、url属性】
                    :on-preview ： 图片的预览工能
                     :on-remove: 删除图片的时候会触发

                -->
        <el-upload
          action="/dev-api/admin/product/fileUpload"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="handleSuccess"
          :file-list="spuImageResult"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>
      <el-form-item label="销售属性">
        <el-select
          :placeholder="`还有${unSelectSaleAttr.length}个未选择`"
          v-model="attrIdAndAttrName"
        >
          <el-option
            :label="unselect.name"
            :value="`${unselect.id}:${unselect.name}`"
            v-for="(unselect, index) in unSelectSaleAttr"
            :key="unselect.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-button
        type="primary"
        icon="el-icon-plus"
        :disabled="!attrIdAndAttrName"
        @click="addSaleAttr"
        >添加销售属性</el-button
      >
      <!-- 展示的是当前SPU属于自己的销售属性 -->
      <el-table style="width: 100%" border :data="spu.spuSaleAttrList">
        <el-table-column
          label="序号"
          type="index"
          width="80px"
          align="center"
        ></el-table-column>
        <el-table-column prop="saleAttrName" label="属性名" width="width">
        </el-table-column>
        <el-table-column prop="prop" label="属性值名称列表" width="width">
          <template slot-scope="{ row, $index }">
            <!-- @close="handleClose(tag)“ 关闭标签的 
                            el-tag:用户展示已有的属性值列表的数据
                        -->
            <el-tag
              :key="tag.id"
              v-for="(tag, index) in row.spuSaleAttrValueList"
              closable
              :disable-transitions="false"
              @close="row.spuSaleAttrValueList.splice(index, 1)"
            >
              {{ tag.saleAttrValueName }}
            </el-tag>
            <el-input
              class="input-new-tag"
              v-if="row.inputVisible"
              v-model="row.inputValue"
              ref="saveTagInput"
              size="small"
              @blur="handleInputConfirm(row)"
            >
            </el-input>
            <!--  @click="showInput" -->
            <el-button
              v-else
              class="button-new-tag"
              size="small"
              @click="addSaleAttrValue(row)"
              >+ 添加</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="prop" label="操作" width="width">
          <template slot-scope="{ row, $index }">
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="spu.spuSaleAttrList.splice($index, 1)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-form>
        <el-button type="primary" @click="addOrUpdateSpu">保存</el-button>
        <!-- 点击取消后 让清除查询的信息 -->
        <el-button @click="cancel">取消</el-button>
      </el-form>
    </el-form>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      //spu属性初始化的时候是一个空的对象
      spu: {
        //三级分类的id
        category3Id: 0,
        //描述
        description: "",
        //spu名称
        spuName: "",
        //平台的id
        tmId: "",
        //收集SPU图片的信息
        spuImageList: [
          {
            // id: 0,
            // imgName: "",
            // imgUrl: "",
            // spuId: 0,
          },
        ],
        //平台属性与属性值收集
        spuSaleAttrList: [
          // {
          //     "baseSaleAttrId": 0,
          //     "id": 0,
          //     "saleAttrName": "string",
          //     "spuId": 0,
          //     "spuSaleAttrValueList": [
          //         {
          //             "baseSaleAttrId": 0,
          //             "id": 0,
          //             "isChecked": "string",
          //             "saleAttrName": "string",
          //             "saleAttrValueName": "string",
          //             "spuId": 0
          //         }
          //     ]
          // }
        ],
      },
      tradeMarkResult: [], //存储品牌信息的数据
      spuImageResult: [], //存储图片信息
      saleResult: [], //销售属性的数据(项目中全部的销售属性)
      attrIdAndAttrName: "", //收集未选择的销售属性的id
    };
  },
  //监听属性 类似于data概念
  computed: {
    //计算出未选中销售属性的值 并展示出来
    unSelectSaleAttr() {
      //销售属性共三个： 颜色 尺寸 版本
      //当前SPU拥有的属于自己的销售属性SPU.spuSaleAttrList  ---颜色
      //过滤去不要的数据，并组件为新的数组
      let result = this.saleResult.filter((item) => {
        //every数组的方法，会返回一个布尔值【真，假的】
        //如果数组当中每一个元素，都满足条件，则返回true，否则返回false
        return this.spu.spuSaleAttrList.every((item1) => {
          return item.name != item1.saleAttrName;
        });
      });
      return result;
    },
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //删除照片墙的图片时候会回调
    handleRemove(file, fileList) {
      //file参数：代表的是删除的那张图片
      //fileList：照片墙删除的某个图片以后，剩余的图片存入fileList
      console.log(file, fileList, "我是凯旋");
      //收集照片墙的数据
      this.spuImageResult = fileList;
    },
    //图片的预览回调
    handlePictureCardPreview(file) {
      // file.url返回数据是图片地址 http://139.198.127.41:9000/sph/20240123/LkDXOG-gcQGSSISZyqSeUA.png
      //将图片地址赋值给属性
      this.dialogImageUrl = file.url;
      //对话框显示
      this.dialogVisible = true;
    },
    //初始化SpuForm数据
    async initSpuData(spu) {
      //获取SPU的信息
      let spuResult = await this.$API.spu.reqSpu(spu.id);
      if (spuResult.code == 200) {
        //在修改spu的时候，需要向服务器发送请求的，
        //将服务器返回的数据（对象） ，赋值给spu属性
        this.spu = spuResult.data;
      }

      //获取品牌信息
      let tradeMarkResult = await this.$API.spu.reqTradeMarkList();
      if (tradeMarkResult.code == 200) {
        this.tradeMarkResult = tradeMarkResult.data;
      }

      //获取spu图片的数据
      let spuImageResult = await this.$API.spu.reqSpuImageList(spu.id);
      if (spuImageResult.code == 200) {
        let listArray = spuImageResult.data;
        //由于照片墙显示图片的数据需要数组，数组里面的元素需要有name和url字段
        //需要把服务器返回的数据进行修改
        listArray.forEach((item) => {
          item.name = item.imgName;
          item.url = item.imgUrl;
        });

        console.log('过滤出来的图片listArray');
        console.log(listArray);
        this.spuImageResult = listArray;
      }

      //获取平台全部的销售属性
      let saleResult = await this.$API.spu.reqBaseSaleAttrList();
      if (saleResult.code == 200) {
        this.saleResult = saleResult.data;
      }
    },
    //照片墙图片上传成功的回调
    handleSuccess(response, file, fileList) {
      this.spuImageList = fileList;
    },
    //添加新的销售属性
    addSaleAttr() {
      // 已经收集需要添加的销售属性的信息
      //吧收集到的销售属性数据进行分割
      // attrId:"2:版本"
      const [baseSaleAttrId, saleAttrName] = this.attrIdAndAttrName.split(":");
      //向SPU对象的spuSaleAttrList属性里面添加新的销售属性
      let newSaleAttr = {
        baseSaleAttrId,
        saleAttrName,
        spuSaleAttrValueList: [],
      };

      //添加新的销售属性 spuSaleAttrList[]
      this.spu.spuSaleAttrList.push(newSaleAttr);
      //清空
      this.attrIdAndAttrName = "";
    },
    addSaleAttrValue(row) {
      //点击销售属性值当中添加按钮的时候，需要把button变为input
      //通过当前销售属性的inputVisible控制
      //挂载在销售属性身上的响应式数据inputVisible，控制button与input切换
      this.$set(row, "inputVisible", true);
      //通过响应式数据inputValue字段收集新增的销售属性值
      this.$set(row, "inputValue", "");
    },
    //el-input失去焦点的事件
    handleInputConfirm(row) {
      //解构出销售属性当中收集数据
      const { baseSaleAttrId, inputValue } = row;
      //新增的销售属性值 名称不能为空
      if (inputValue.trim() == "") {
        this.$message("属性值不能为空");
        return;
      }
      //属性值不能重复 遍历出属性列表
      //遍历出所有item的值如果和输入的属性相同就直接返回不去添加
      let result = row.spuSaleAttrValueList.every(
        (item) => item.saleAttrValueName !== inputValue
      );
      if (!result) return;
      let newSaleAttrValue = { baseSaleAttrId, saleAttrValueName: inputValue };

      //新增
      row.spuSaleAttrValueList.push(newSaleAttrValue);
      //修改inputVisible为false，不在显示button
      row.inputVisible = false;
    },
    //保存或者修改按钮
    async addOrUpdateSpu() {
      //整理参数： 需要整理照片墙的数据
      //携带参数： 对于图片，需要携带imageName与imageUrl字段
      this.spu.spuImageList = this.spuImageList.map((item) => {
        return {
          imgName: item.name,
          imgUrl: (item.response && item.response.data) || item.imgUrl,
        };
      });
      //发请求
      let result = await this.$API.spu.reqAddOrUpdateSpu(this.spu);
      if (result.code == 200) {
        //提示
        this.$message({ type: "success", message: "保存成功" });
        //通知父组件回到场景0
        this.$emit("changeScene", {scene:0,flag:this.spu.id?'修改':'添加'});
      }
      Object.assign(this._data,this.$options.data())
    },
    //点击添加SPU按钮的时候，发请求的函数
    async addSpuDate(category3Id) {
      //添加SPU的时候收集三级分类的id
      this.spu.category3Id =  category3Id;
      //获取品牌信息
      let tradeMarkResult = await this.$API.spu.reqTradeMarkList();
      if (tradeMarkResult.code == 200) {
        this.tradeMarkResult = tradeMarkResult.data;
      }

    //   //获取平台全部的销售属性
      let saleResult = await this.$API.spu.reqBaseSaleAttrList();
      if (saleResult.code == 200) {
        this.saleResult = saleResult.data;
      }
    },
    //取消按钮的回调
    cancel(){
      //取消按钮的回调，通知父亲切换场景为0

      this.$emit('changeScene', {scene:0,flag:''});
      //清理数据
      Object.assign(this._data,this.$options.data())
      
    }
  },
};
</script>
<style>
.el-tag + .el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>